<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <link href="css/layui.css" rel="stylesheet">
    <link href="dist/gridstack.css" rel="stylesheet"/>
    <link href="css/common.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
<div class="head layui-row">
    <div class="layui-col-xs6">
        <img src="images/logo.png" id="logo"/>
    </div>
    <div class="layui-col-xs6" style="text-align: right">
        <div class="search-box">
            <input id="search" placeholder="Search"/>
            <i class="icon-search"></i>
            <i class="icon-add-paper" onclick="addNew()"></i>
            <i class="icon-setting"></i>
            <label id="username">Ttmny</label>
        </div>

    </div>
</div>
<div class="main-container" id="box">
    <div class="top-btn-box">
        <a href="oil_spare.html"><input class="btn1" type="button" value="Crude Oil"/></a>
        <input class="btn1" type="button" value="Peak And Valley"/>
        <input class="btn1 selected" type="button" value="Stock"/>
        <input class="btn1" type="button" value="Gold"/>
    </div>
    <div class="main-box">
        <div class="grid-stack">
            <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="8" data-gs-height="6">
                <div class="grid-stack-item-content tip-box">
                    <div class="tip-title">
                        <label>Shanghai Composite Index</label>
                        <i class="icon-edit"></i>
                        <i class="icon-close"></i>
                    </div>
                    <div class="tip-body" id="indexChart"></div>
                </div>
            </div>
            <div class="grid-stack-item" data-gs-x="8" data-gs-y="0" data-gs-width="4" data-gs-height="6">
                <div class="grid-stack-item-content tip-box">
                    <div class="tip-title">
                        <label>Shanghai Composite Index</label>
                        <i class="icon-edit"></i>
                        <i class="icon-close"></i>
                    </div>
                    <div class="tip-body">
                        <div class="tip-table-box">
                            <table class="layui-table" lay-skin="line">
                                <!--<colgroup>-->
                                <!--<col width="20%">-->
                                <!--<col width="30%">-->
                                <!--<col width="20%">-->
                                <!--<col width="30%">-->
                                <!--</colgroup>-->
                                <tbody>
                                <tr>
                                    <td>Volume</td>
                                    <td>{{indexData.Volume}}</td>
                                    <td>Last Close</td>
                                    <td class="color-red">{{indexData.LastClose}}</td>
                                </tr>
                                <tr>
                                    <td>Newest</td>
                                    <td class="color-green">{{indexData.NewPrice}}</td>
                                    <td>Opening</td>
                                    <td class="color-red">{{indexData.Open}}</td>
                                </tr>
                                <tr>
                                    <td>Highest</td>
                                    <td class="color-red">{{indexData.High}}</td>
                                    <td>minimum</td>
                                    <td class="color-green">{{indexData.Low}}</td>
                                </tr>
                                <tr>
                                    <td>{{indexData.flag ? 'Increase' : 'reduce'}}</td>
                                    <td :class="indexData.color">{{indexData.PriceChangeRatio}}</td>
                                    <td>Rise or fall</td>
                                    <td :class="indexData.color">
                                        {{(indexData.NewPrice - indexData.Open).toFixed(2)}}
                                    </td>
                                </tr>
                                <tr>
                                    <td>Amount</td>
                                    <td>{{indexData.Amount}}</td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>Purchase quantity</td>
                                    <td></td>
                                    <td>{{indexData.BV1}}</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>Sales quantity</td>
                                    <td></td>
                                    <td>{{indexData.SV1}}</td>
                                    <td></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="grid-stack-item" v-for="item in tips" :data-gs-x="item.x" :data-gs-y="item.y"
                 :data-gs-width="item.width" :data-gs-height="item.height">
                <div class="grid-stack-item-content tip-box">
                    <div class="tip-title">
                        <label>{{item.title}}</label>
                        <i class="icon-edit"></i>
                        <i class="icon-close"></i>
                    </div>
                    <div class="tip-body" :id="'chart' + item.index"></div>
                </div>
            </div>
            <div class="grid-stack-item" data-gs-x="0" data-gs-y="10" data-gs-width="3" :data-gs-height="4">
                <div class="grid-stack-item-content tip-box">
                    <div class="tip-title">
                        <label>Ranking of Stocks</label>
                        <i class="icon-edit"></i>
                        <i class="icon-close"></i>
                    </div>
                    <div class="tip-body">
                        <div class="tip-table-box">
                            <table class="layui-table" lay-skin="line">
                                <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Increase</th>
                                    <th>Newest</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr class="increase" v-for="item in increaseData">
                                    <td>{{item[2]}}</td>
                                    <td style="text-align: center">{{item[3]}}
                                        <i style="right: 18px"></i>
                                    </td>
                                    <td style="text-align: center">{{item[5]}}%</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="grid-stack-item" data-gs-x="3" data-gs-y="10" data-gs-width="5" data-gs-height="4">
                <div class="grid-stack-item-content tip-box">
                    <div class="tip-title">
                        <label>Ranking of Stocks by Industry/Concept</label>
                        <i class="icon-edit"></i>
                        <i class="icon-close"></i>
                    </div>
                    <div class="tip-body">
                        <div class="tip-table-box">
                            <table class="layui-table" lay-skin="line" style="width: 50%;float: left">
                                <colgroup>
                                    <col width="40%">
                                    <col width="25%">
                                    <col width="35%">
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>Plate</th>
                                    <th>Coupon</th>
                                    <th>Shares</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr class="increase" v-for="item in conceptIncreaseData">
                                    <td>{{item.NAME.length > 7 ? item.NAME.substring(0, 6) + '...' : item.NAME }}</td>
                                    <td>{{(item.PERCENT * 100).toFixed(2)}}%<i></i></td>
                                    <td>{{item.MAXPERCENTSTOCK.NAME.length > 6 ? item.MAXPERCENTSTOCK.NAME.substring(0,6) + '...' : item.MAXPERCENTSTOCK.NAME}}</td>
                                </tr>
                                </tbody>
                            </table>
                            <table class="layui-table" lay-skin="line" style="width: 50%;float: left">
                                <colgroup>
                                    <col width="40%">
                                    <col width="25%">
                                    <col width="35%">
                                </colgroup>
                                <thead>
                                <tr>
                                    <th style="border-left: 1px solid #3e3e3e">Plate</th>
                                    <th>Coupon</th>
                                    <th>Shares</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr class="increase" v-for="item in industryIncreaseData">
                                    <td style="border-left: 1px dashed #3e3e3e">
                                        {{item.NAME.length > 7 ? item.NAME.substring(0, 7) + '...' : item.NAME }}
                                    </td>
                                    <td>{{(item.PERCENT * 100).toFixed(2)}}%<i></i></td>
                                    <td>{{item.MAXPERCENTSTOCK.NAME.length > 7 ? item.MAXPERCENTSTOCK.NAME.substring(0,6) + '...' : item.MAXPERCENTSTOCK.NAME}}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="grid-stack-item" data-gs-x="8" data-gs-y="6" data-gs-width="4" data-gs-height="8">
                <div class="grid-stack-item-content tip-box">
                    <div class="tip-title">
                        <label>Major Stock Index</label>
                        <i class="icon-edit"></i>
                        <i class="icon-close"></i>
                    </div>
                    <div class="tip-body">
                        <div class="tip-table-box">
                            <table class="layui-table" lay-skin="line">
                                <colgroup>
                                    <col width="47%">
                                    <col width="27%">
                                    <col width="26%">
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>Name</th>
                                    <th style="text-align: center">Last</th>
                                    <th style="text-align: center">%CH</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr :class="item.PriceChangeRatio > 0 ? 'increase' : 'reduce'"
                                    v-for="item in stockData">
                                    <td>{{item.Name.length > 25 ? item.Name.substring(0, 23)+'...' : item.Name}}</td>
                                    <td style="text-align: center">{{item.NewPrice}}
                                        <i style="right: 18px"></i>
                                    </td>
                                    <td style="text-align: center">{{item.PriceChangeRatio}}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="grid-stack-item" data-gs-x="0" :data-gs-y="20" data-gs-width="12" :data-gs-height="10">
                <div class="grid-stack-item-content tip-box">
                    <div class="tip-title">
                        <label>Preface Information</label>
                        <i class="icon-edit"></i>
                        <i class="icon-close"></i>
                    </div>
                    <div class="tip-body">
                        <div class="top-btn-box">
                            <input class="btn1" type="button" value="Revenues"/>
                            <input class="btn1" type="button" value="Credit Rating"/>
                            <input class="btn1" type="button" value="M&A"/>
                            <input class="btn1" type="button" value="Asset"/>
                            <input class="btn1" type="button" value="Balance of Payment"/>
                        </div>
                        <div class="table-box">
                            <div class="layui-carousel" id="carousel1">
                                <div carousel-item>
                                    <div class="page">
                                        <table class="layui-table" lay-skin="line">
                                            <tbody>
                                            <tr v-for="item in tableData">
                                                <td>{{item.td1}}</td>
                                                <td>{{item.td2}}</td>
                                                <td>{{item.td3}}</td>
                                                <td>{{item.td4}}</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="page">
                                        <table class="layui-table" lay-skin="line">
                                            <tbody>
                                            <tr v-for="item in tableData">
                                                <td>{{item.td1}}</td>
                                                <td>{{item.td2}}</td>
                                                <td>{{item.td3}}</td>
                                                <td>{{item.td4}}</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="page">
                                        <table class="layui-table" lay-skin="line">
                                            <tbody>
                                            <tr v-for="item in tableData">
                                                <td>{{item.td1}}</td>
                                                <td>{{item.td2}}</td>
                                                <td>{{item.td3}}</td>
                                                <td>{{item.td4}}</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="page">
                                        <table class="layui-table" lay-skin="line">
                                            <tbody>
                                            <tr v-for="item in tableData">
                                                <td>{{item.td1}}</td>
                                                <td>{{item.td2}}</td>
                                                <td>{{item.td3}}</td>
                                                <td>{{item.td4}}</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery-1.7.min.js"></script>

<script src="js/jquery-ui.min.js"></script>
<script src="js/layui/layui.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/lodash.min.js"></script>
<script src="js/knockout-min.js"></script>
<script src="dist/gridstack.js"></script>
<script src="js/gAjax.js"></script>
<!--<script>
    function jQuery112406243328094571283_1542448804941(d) { // 涨幅回掉
        var data = [];
        d.data.forEach(function (item) {
            var arr = item.split(',');
            data.push(arr);
        });
        mainVue.increaseData = data;
    }
</script>-->
<script type="text/javascript">
    layui.use(['carousel'], function () {
        var carousel = layui.carousel //轮播
        //执行一个轮播实例
        carousel.render({
            elem: '#carousel1',
            width: '100%', //设置容器宽度
            height: '100%',
            arrow: 'none', //不显示箭头
            autoplay: false,
            anim: 'fade' //切换动画方式
        });
    });
    function addNew() {
        window.location.href = "jovearch_spare/shujudaoru.html";
    }
    $(function () {
        var options = {};
        $('.grid-stack').gridstack(options);
        var grid = $('.grid-stack').data('gridstack');
        mainVue.grid = $('.grid-stack').data('gridstack');
        mainVue.initChartHeight();

        var chartJson = getUrlParam("chartJson");
        if (chartJson && chartJson.length > 0) {
            mainVue.addTip(chartJson);
        }

        $('.icon-close').click(function () {
            var $tip = $(this).parents(".grid-stack-item");
            grid.remove_widget($tip)
        });
    });
    var indexChart, chart2, chart3;
    var mainVue = new Vue({
        el: '#box',
        data: {
            grid: {},
            increaseData: [], // 涨幅
            conceptIncreaseData: [], // 概念涨幅
            industryIncreaseData: [], // 行业涨幅
            stockData: [], // 前50证券涨跌
            indexData: {}, // 上证指数
            tips: [{title: "Forecast of Shanghai Stock Index", x: 0, y: 6, width: 4, height: 4, index: 2},
                {title: "Market Sentiment of Shanghai Stock Index", x: 4, y: 6, width: 4, height: 4, index: 3},
                /*{title: "Water And Energy Consumption In Beijing", x: 0, y: 15, width: 6, height: 5, index: 4},
                {title: "Zhejiang Hangzhou Visitor Index Peak And Valley", x: 6, y: 15, width: 6, height: 5, index: 5}*/],
            tableData: {
                td1: "Oct 24，2018 03:20:00 AM Oct 24，2018 03:40:13 PM Oct 24，2018 05:",
                td2: 'Live "Tree Schilling" is a Japanese actor who thought the recor',
                td3: "Neutral",
                td4: "3,5688"
            }
        },
        mounted: function () {
            var _this = this;
        },
        methods: {
            getIncreaseData: function () { // 涨幅
                var _this = this;
                /*var url = 'http://nufm.dfcfw.com/EM_Finance2014NumericApplication/JS.aspx?cb=jQuery112406243328094571283_1542448804941&type=CT&token=4f1862fc3b5e77c150a2b985b12db0fd&sty=FCOIATC&js=(%7Bdata%3A%5B(x)%5D%2CrecordsFiltered%3A(tot)%7D)&cmd=C._A&st=(ChangePercent)&sr=-1&p=1&ps=20&_=1542448804942';
                $.ajax({
                    url: url, //不指定回调名，可省略callback参数，会由jQuery自动生成
                    dataType: 'jsonp',
                    success: function(data) {
                        console.log(data);
                    }
                });*/
                $.get('json/spare_stock/major_bonds.json', function (data) {
                    _this.increaseData = data;
                });

            },
            getConceptIncreaseData: function () { // 概念涨幅
                var _this = this;
                /*var url = 'http://quotes.money.163.com/hs/realtimedata/service/plate.php?host=/hs/realtimedata/service/plate.php&page=0&query=TYPE:GAINIAN&fields=RN,NAME,STOCK_COUNT,PE,LB,HSL,PERCENT,TURNOVER,VOLUME,PLATE_ID,TYPE_CODE,PRICE,UPNUM,DOWNNUM,MAXPERCENTSTOCK,MINPERCENTSTOCK&sort=PERCENT&order=desc&count=5&type=query&callback=callback_1792076604&req=61445';
                $.ajax({
                    url: url, //不指定回调名，可省略callback参数，会由jQuery自动生成
                    dataType: 'jsonp',
                    success: function(data) {
                        _this.conceptIncreaseData = data.list;
                    }
                });*/
                $.get('json/spare_stock/major_exchange_rate.json', function (data) {
                    _this.conceptIncreaseData = data;
                });
            },
            getIndustryIncreaseData: function () { // 行业涨幅
                var _this = this;
                /*var url = 'http://quotes.money.163.com/hs/realtimedata/service/plate.php?host=/hs/realtimedata/service/plate.php&page=0&query=TYPE:HANGYE&fields=RN,NAME,STOCK_COUNT,PE,LB,HSL,PERCENT,TURNOVER,VOLUME,PLATE_ID,TYPE_CODE,PRICE,UPNUM,DOWNNUM,MAXPERCENTSTOCK,MINPERCENTSTOCK&sort=PERCENT&order=desc&count=5&type=query&callback=callback_1792076604&req=61445';
                $.ajax({
                    url: url, //不指定回调名，可省略callback参数，会由jQuery自动生成
                    dataType: 'jsonp',
                    success: function(data) {
                        _this.industryIncreaseData = data.list;
                    }
                });*/
                $.get('json/spare_stock/major_exchange_rate2.json', function (data) {
                    _this.industryIncreaseData = data;
                });
            },
            getIndexData: function () { // 上证指数
                var _this = this;
                /*$.get("http://ds.jctytech.com/stock.php?u=13501222321&symbol=SH000001&type=stock", function (result) {
                    result[0].Amount = Math.ceil(result[0].Amount / 1000000000) + " billions";
                    result[0].flag = result[0].PriceChangeRatio > 0 ? true : false;
                    result[0].color = result[0].PriceChangeRatio > 0 ? 'color-red' : 'color-green';
                    _this.indexData = result[0];
                });*/
                _this.indexData = {"Date":"1542610816","Symbol":"SH000001","Name":"上证指数","Price3":0,"Vol2":0,"Open_Int":0,"Price2":0,"LastClose":2679.11,"Open":2681.9,"High":2703.51,"Low":2674.18,"NewPrice":2703.51,"Volume":231662832,"Amount":"197 billions","BP1":0,"BP2":0,"BP3":0,"BP4":0,"BP5":0,"BV1":12327616,"BV2":0,"BV3":0,"BV4":0,"BV5":0,"SP1":0,"SP2":0,"SP3":0,"SP4":0,"SP5":0,"SV1":10875648,"SV2":0,"SV3":0,"SV4":0,"SV5":0,"PriceChangeRatio":0.910747,"flag":true,"color":"color-red"};
            },
            getStockData: function () { // 前50证券涨跌
                var _this = this;
                /*$.get("http://ds.jctytech.com/stock.php?u=13501222321&market=IXIX&type=stock", function (result) {
                    _this.stockData = result.slice(0, result.length > 14 ? 14 : result.length);
                });*/
                $.get('json/spare_stock/major_stock_index.json', function (result) {
                    _this.stockData = result.slice(0, result.length > 14 ? 14 : result.length);
                });
            },
            addTip: function (chartJson) {
                var chartObj = JSON.parse(chartJson);
                console.log(chartObj)
                var html = "<div class='grid-stack-item' data-gs-x='4' data-gs-y='10' data-gs-width='4' data-gs-height='4'>\n" +
                    "                <div class='grid-stack-item-content tip-box'>\n" +
                    "                    <div class='tip-title'>\n" +
                    "                        <label>New Tip</label>\n" +
                    "                        <i class='icon-edit'></i>\n" +
                    "                        <i class='icon-close'></i>\n" +
                    "                    </div>\n" +
                    "                    <div class='tip-body' id='newChart'>\n" +
                    "                    </div>\n" +
                    "                </div>\n" +
                    "            </div>"
                this.grid.add_widget($(html), 0, 0, 12, 5);
                mainVue.initChartHeight($("#newChart"));
                var newChart = echarts.init(document.getElementById("newChart"));

                var data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];

                var dateList = chartObj.xAxis;
                var valueList = chartObj.data;
                var xAxis = [{
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#666',
                            fontSize: '14',
                            fontWeight: 800
                        }
                    }, data: dateList
                }];
                var yAxis = [{
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#666',
                            fontSize: '14',
                            fontWeight: 800
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(51, 51, 51, 0.7)'
                        }
                    }
                }];
                var series = [{
                    type: chartObj.type,
                    showSymbol: false,
                    data: valueList,
                    lineStyle: {
                        color: 'rgba(18, 143, 255, 1)'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(18, 143, 255, 1)'
                        }, {
                            offset: 1,
                            color: 'rgba(18, 143, 255, 0.2)'
                        }])
                    },
                }];
                newChart.setOption(this.getOptionByParams(null, xAxis, yAxis, series));
            },
            initChartHeight: function ($tipBody) {//初始化chart容器高度, 初始化echarts
                var _this = this;
                if ($tipBody) { // 单独初始化
                    $tipBody.height($tipBody.parents(".tip-box").height() - 67);
                } else { // 群体初始化
                    $(".tip-body").each(function () {
                        $(this).height($(this).parents(".tip-box").height() - 67);
                    });

                    _this.getStockData(); // 获取前50证券涨跌
                    _this.getIndexData(); // 获取上证指数
                    _this.getIncreaseData(); // 获取涨幅
                    _this.getConceptIncreaseData(); // 获取概念涨幅值
                    _this.getIndustryIncreaseData(); // 获取行业涨幅

                    indexChart = echarts.init(document.getElementById("indexChart"));
                    chart2 = echarts.init(document.getElementById("chart2"));
                    chart3 = echarts.init(document.getElementById("chart3"));

                    this.initIndexChart();
                    this.initChart2();
                    this.initChart3();

                    $.get('json/news.json', function (data) {
                        var now = new Date();
                        var year = now.getFullYear();
                        var month = now.getMonth();
                        var day = now.getDate();
                        var hour = now.getHours();
                        var minute = now.getMinutes();
                        data.forEach(function (item) {
                            // 随机一个当前不到的时间
                            var day1 = Math.ceil(day - Math.random() * 2);
                            var hour1 = Math.ceil(Math.random() * hour);
                            var minute1 = Math.ceil(Math.random() * 60);
                            if(minute1 > minute && hour1 == hour && day1 == day) {
                                hour1--;
                            }
                            hour1 = hour1 > 9 ? hour1 : ('0' + hour1);
                            minute1 = minute1 > 9 ? minute1 : ('0' + minute1);
                            item.td1 = year + "-" + (month+1) + "-" + day1 + " " + hour1 + ":" + minute1;
                            /*item.td2 = item.td2.length > 90 ? item.td2.substring(0, 70) + "..." : item.td2;
                            item.td3 = Math.random() > 0.5 ? "Positive +" : "Neutral";
                            item.td4 = (Math.ceil(Math.random() * 30000) || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');*/
                            /*item.td1 = item.td1.replace(/\//g, "-");*/
                        });

                        var count = 0;
                        setInterval(function () {
                            _this.tableData = data.slice(14 - count % 15, 27 - count % 15);
                            count++;
                        }, 2000);
                    });
                }
            },
            initIndexChart: function () { // 上证综合指数
                var _this = this;
                /*$.get('http://ds.jctytech.com/stock.php?u=13501222321&symbol=SH000001&type=trend', function (rawData) {
                    var upColor = '#05cb91';
                    var downColor = '#f54f77';
                    _this.getOption(rawData, upColor, downColor);
                });*/

                $.get('json/spare_stock/shanghai_stock_index_chart.json', function (rawData) {
                    var upColor = '#05cb91';
                    var downColor = '#f54f77';
                    _this.getOption(rawData, upColor, downColor);
                });
            },

            getOption: function (data, upColor, downColor) {
                var xData = [];
                var trendData = [];
                var amountData = [];
                data.Data.forEach(function (item) {
                    var date = new Date(item.Date * 1000);
                    xData.push((date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes());
                    trendData.push(item.Trend);
                    amountData.push(item.Amount);
                });
                indexChart.setOption({
                    backgroundColor: '#1a1a1c',
                    animation: false,
                    title: {
                        text: 'Timeshare   Amount : 153 Ten Thousand',
                        top: '55%',
                        left: "25",
                        textStyle: {
                            fontSize: '12',
                            color: '#666',
                            fontWeight: 800
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        },
                        backgroundColor: 'rgba(245, 245, 245, 0.8)',
                        borderWidth: 1,
                        borderColor: '#ccc',
                        padding: 10,
                        textStyle: {
                            color: '#000'
                        }
                    },
                    axisPointer: {
                        link: {xAxisIndex: 'all'},
                        label: {
                            backgroundColor: '#777'
                        }
                    },
                    toolbox: {
                        show: false
                    },

                    visualMap: {
                        show: false,
                        seriesIndex: 5,
                        dimension: 2,
                        pieces: [{
                            value: 1,
                            color: downColor
                        }, {
                            value: -1,
                            color: upColor
                        }]
                    },
                    grid: [{
                        height: '40%',
                        top: "35px",
                        left: '30px',
                        right: '30px',
                        containLabel: true
                    }, {
                        top: "70%",
                        left: '50px',
                        right: '30px',
                        bottom: '15px',
                        containLabel: true
                    }],
                    xAxis: [{
                        show: false,
                        type: 'category',
                        data: xData,
                        scale: true,
                        boundaryGap: false,
                        axisLine: {onZero: false},
                        splitLine: {show: false},
                        axisLabel: {
                            show: false,
                            textStyle: {
                                color: '#666',
                                fontSize: '14',
                                fontWeight: 800
                            }
                        },
                        splitNumber: 20,
                        min: 'dataMin',
                        max: 'dataMax'
                    }, {
                        type: 'category',
                        data: xData,
                        gridIndex: 1,
                        scale: true,
                        boundaryGap: false,
                        axisLine: {onZero: false},
                        splitLine: {show: false},
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#666',
                                fontSize: '14',
                                fontWeight: 800
                            }
                        },
                        splitNumber: 20,
                        min: 'dataMin',
                        max: 'dataMax',
                        axisPointer: {
                            z: 100
                        }
                    }],
                    yAxis: [{
                        axisLine: {show: false},
                        scale: true,
                        splitLine: {
                            lineStyle: {
                                color: '#2c2c2d',
                                type: 'dashed'
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#666',
                                fontSize: '14',
                                fontWeight: 800
                            }
                        },
                        splitArea: {
                            show: false
                        }
                    }, {
                        scale: true,
                        gridIndex: 1,
                        splitNumber: 2,
                        axisLine: {show: false},
                        axisTick: {show: false},
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#666',
                                fontSize: '14',
                                fontWeight: 800
                            },
                            formatter: function (val) {
                                return (parseFloat(val / 100000000)).toFixed(0) + '亿';
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#2c2c2d',
                                type: 'dashed'
                            }
                        },
                    }],
                    dataZoom: [{
                        type: 'inside',
                        xAxisIndex: [0, 1],
                        start: 50,
                        end: 100
                    }],
                    series: [{
                        name: 'Index',
                        type: 'line',
                        symbol: 'none',
                        data: trendData,
                        smooth: true,
                        itemStyle: {
                            color: '#128dfb'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(25, 46, 67, 0.4)'
                            }, {
                                offset: 1,
                                color: 'rgba(18, 143, 255, 0)'
                            }])
                        }
                    }, {
                        name: 'Volume',
                        type: 'bar',
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        barMaxWidth: 3,
                        data: amountData,
                        itemStyle: {
                            normal: {
                                color: upColor,
                                color0: downColor,
                                borderColor: null,
                                borderColor0: null
                            }
                        }

                    }]
                }, true);
            },
            initChart2: function () {
                $.get('json/large_market_forecast.json', function (rawData) {
                    var xData = [];
                    var data1 = [];
                    var data2 = [];
                    rawData.forEach(function (item) {
                        xData.push(item.date);
                        data1.push(item.index1);
                        data2.push(item.index2);
                    });
                    var option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            },
                        },
                        grid: {
                            top: "40px",
                            left: '30px',
                            right: '35px',
                            bottom: '30px',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            splitLine: {show: false},
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#666',
                                    fontSize: '14',
                                    fontWeight: 800
                                }
                            },
                            data: xData
                        },
                        yAxis: {
                            axisLine: {show: false},
                            type: 'value',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed',
                                    color: 'rgba(51, 51, 51, 0.7)'
                                }
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#666',
                                    fontSize: '14',
                                    fontWeight: 800
                                }
                            },
                            axisTick: {
                                show: false
                            }
                        },
                        /* dataZoom: [{
                             type: 'inside',
                             start: 96,
                             end: 100
                         }],*/
                        series: [
                            {
                                name: '上证综指实际值',
                                type: 'bar',
                                stack: '总量',
                                barMaxWidth: 2.5,
                                color: '#05ca92',
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'top'
                                    }
                                },
                                data: data1
                            },
                            {
                                name: '预测值',
                                type: 'bar',
                                stack: '总量',
                                barMaxWidth: 2.5,
                                color: "#118eff",
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'bottom'
                                    }
                                },
                                data: data2
                            }
                        ]
                    };

                    chart2.setOption(option);
                });
            },
            initChart3: function () {
                var _this = this;
                $.get('json/stock_market_sentiment_index.json', function (rowData) {
                    var xData = [];
                    var data = [];
                    rowData.forEach(function (item) {
                        xData.push(item.date);
                        data.push(item.index1);
                    })

                    var tooltip = {
                        trigger: 'axis',
                        formatter: function (params) {
                            params = params[0];
                            return params.name + '<br/>' + "<div style='color: #128FFF'>" + "Stock Index: " + params.value + "</div>";
                        }
                    };

                    var xAxis = [{
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#666',
                                fontSize: '14',
                                fontWeight: 800
                            }
                        },
                        data: xData
                    }];
                    var yAxis = [{
                        axisLine: {show: false},
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#666',
                                fontSize: '14',
                                fontWeight: 800
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(51, 51, 51, 0.7)'
                            }
                        },
                    }];
                    var series = [{
                        type: 'line',
                        showSymbol: false,
                        data: data,
                        lineStyle: {
                            color: 'rgba(18, 143, 255, 1)'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(18, 143, 255, 1)'
                            }, {
                                offset: 1,
                                color: 'rgba(18, 143, 255, 0)'
                            }])
                        },
                    }];
                    chart3.setOption(_this.getOptionByParams(tooltip, xAxis, yAxis, series));
                });
            },
            getOptionByParams: function (tooltip, xAxis, yAxis, series) { //根据x,y轴和数据生成option
                var option = {
                    tooltip: tooltip,
                    /*toolbox: { //工具栏
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: magicTypeArr},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },*/
                    /*legend: { //导航块
                        data: legendData
                    },*/
                    grid: {
                        top: "40px",
                        left: '30px',
                        right: '35px',
                        bottom: '30px',
                        containLabel: true
                    },
                    xAxis: xAxis,
                    yAxis: yAxis,
                    series: series
                };
                return option;
            }
        }
    });

    function splitData(rawData) {
        var categoryData = [];
        var values = [];
        var volumes = [];
        for (var i = 0; i < rawData.length; i++) {
            categoryData.push(rawData[i].splice(0, 1)[0]);
            values.push(rawData[i]);
            volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
        }

        return {
            categoryData: categoryData,
            values: values,
            volumes: volumes
        };
    }

    function calculateMA(dayCount, data) {
        var result = [];
        for (var i = 0, len = data.values.length; i < len; i++) {
            if (i < dayCount) {
                result.push('-');
                continue;
            }
            var sum = 0;
            for (var j = 0; j < dayCount; j++) {
                sum += data.values[i - j][1];
            }
            result.push((sum / dayCount).toFixed(3));
        }
        return result;
    }
</script>
</body>
</html>